<template>
  <div class="rightBox">
    <FirstHeader :title="'车辆信息'" :file="'home'" :icon="'icon-s-3'"></FirstHeader>
    <div class="table px-20 mt-20">
      <tr class="head">
        <td class="w-140 text-center">车辆</td>
        <td class="w-100 text-center">状态</td>
        <td class="w-120 text-center">任务次数</td>
        <td class="w-140 text-center">联系方式</td>
      </tr>
      <tr class="listItem" style="height: 45px; line-height: 45px" v-for="(item, index) in vehicleList" :key="index">
        <td class="w-140 text-center">{{ item.carNo }}</td>
        <td class="w-100 text-center">{{ item.status }}</td>
        <td class="w-120 text-center">{{ item.count }}</td>
        <td class="w-140 text-center">{{ item.telephone }}</td>
      </tr>
    </div>
    <div class="task-type mt-20">
      <SecondHeader :title="'任务类型'"></SecondHeader>
      <div class="pt-10 chart">
        <TaskType></TaskType>
      </div>
    </div>
    <div class="task-type mt-20">
      <SecondHeader :title="'MPDS分析统计'"></SecondHeader>
      <div class="pt-10 chart">
        <AnalyseChart></AnalyseChart>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="home">
import { onMounted, ref } from "vue";
import TaskType from "./TaskTypeChart.vue";
import AnalyseChart from "./AnalyseChart.vue";
import FirstHeader from "@/components/FirstHeader/index.vue";
import SecondHeader from "@/components/SecondHeader/index.vue";
import { ambulanceList } from "@/api/modules/home";

onMounted(() => {
  getAmbulanceList();
});
const getAmbulanceList = async () => {
  let {
    data: { list }
  } = await ambulanceList({ pageNum: 1, pageSize: 10 });
  vehicleList.value = list;
};
const vehicleList = ref<any[]>([]);
</script>

<style scoped lang="scss">
.rightBox {
  width: 520px;
  background: url("@/assets/images/home/fourAidBg.png") no-repeat;
  background-size: 100% 100%;
  border: 1px solid #119edb;

  .table {
    height: 195px;
    border-collapse: collapse;
    color: #fff;
    overflow-y: auto;

    td {
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .head {
      position: sticky;
      top: 0;
      height: 40px;
      line-height: 40px;
      background-color: #143248;
    }
  }
  .chart {
    height: 265px;
  }
}
</style>
